<!-- 合同档案-订单详情 -->
<template>
  <div class="content">
    <TableTurn :table-data="getData" ref="tableRef">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        v-for="item in selectedHeader"
        :title="item.name"
        :data-index="item.code"
        :key="item.code"
        :width="200"
      >
        <!-- 计划开始时间 -->
        <template v-if="item.code === 'createdAt'" #cell="{ record }">
          {{ dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
        </template>

        <!-- 计划开始时间 -->
        <template v-else-if="item.code === 'totalPrice'" #cell="{ record }">
          ￥{{ record.totalPrice }}
        </template>

        <!-- 订单确认状态 -->
        <template v-else-if="item.code === 'okState'" #cell="{ record }">
          <div class="use-state">
            <div
              class="cycle"
              :class="
                record.state === 1 ? 'greyColor-cycle' : 'greenColor-cycle'
              "
            >
            </div>
            <div :class="record.state === 1 ? 'greyColor' : 'greenColor'">{{
              record.state === 1 ? '待确认' : '已确认'
            }}</div>
          </div>
        </template>

        <!-- 订单执行状态 -->
        <template v-else-if="item.code === 'executionState'" #cell="{ record }">
          <div class="use-state">
            <div
              class="cycle"
              :class="
                record.state === 1
                  ? 'greyColor-cycle'
                  : record.state === 2
                  ? 'blueColor-cycle'
                  : record.state === 3
                  ? 'orangeColor-cycle'
                  : 'greenColor-cycle'
              "
            >
            </div>
            <div
              :class="
                record.state === 1
                  ? 'greyColor'
                  : record.state === 2
                  ? 'blueColor'
                  : record.state === 3
                  ? 'orangeColor'
                  : 'greenColor'
              "
              >{{
                record.state === 1
                  ? '待执行'
                  : record.state === 2
                  ? '执行中'
                  : record.state === 3
                  ? '挂起中'
                  : '已完成'
              }}</div
            >
          </div>
        </template>
      </a-table-column>
    </TableTurn>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import {
    GetClientOrder,
    GetHeaderSettings,
    putHeaderSettings,
    putClientOrder,
    DeleteClientOrder,
  } from '@/api/order-management/client-order';

  const route = useRoute();
  const id = Number(route.query.id); // 合同id
  // 获取对应列表信息
  const getData = async () => {
    try {
      const res = await GetClientOrder({
        page: 1,
        size: 99999,
        contractId: id,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const router = useRouter();
  const back = () => {
    // warning： Go to the node that has the permission
    router.push({ name: 'Workplace' });
  };

  const columns = [
    {
      name: '销售订单编号',
      code: 'number',
      isDefault: 1,
    },
    {
      name: '客户名称',
      code: 'clientCompanyName',
      isDefault: 1,
    },
    {
      name: '客户联系人',
      code: 'name',
      isDefault: 1,
    },
    {
      name: '客户联系电话',
      code: 'customerPhone',
      isDefault: 1,
    },
    {
      name: '业务员',
      code: 'userStaffName',
      isDefault: 1,
    },
    {
      name: '订单总金额',
      code: 'totalPrice',
      isDefault: 1,
    },
    {
      name: '订单创建时间',
      code: 'createdAt',
      isDefault: 1,
    },
    {
      name: '关联订单合同编号',
      code: 'contractNumber',
      isDefault: 1,
    },
    {
      name: '关联需求编号',
      code: 'demandNumber',
      isDefault: 1,
    },
    {
      name: '关联生产工单号',
      code: 'name',
      isDefault: 1,
    },
    {
      name: '订单确认状态',
      code: 'okState',
      isDefault: 1,
    },
    {
      name: '订单执行状态',
      code: 'executionState',
      isDefault: 1,
    },
  ];
  // 在表格上显示的表头
  const selectedHeader = computed(() => {
    const arr: any = [];
    columns.forEach((item) => {
      if (item.isDefault === 1) {
        arr.push(item);
      }
    });
    return arr;
  });
</script>

<style scoped lang="less">
  .content {
    // padding-top: 100px;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // margin-left: -95px;
    // margin-top: -121px;
    // text-align: center;
  }
</style>
